<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card class="form-container" shadow="never">
                    <el-form :model="productCateFrom"
                             :rules="rules"
                             ref="productCateFrom"
                             label-width="150px">
                        <el-form-item label="分类名称：" prop="name">
                            <el-input v-model="productCateFrom.name"></el-input>
                        </el-form-item>
                        <el-form-item label="上级分类：" prop="parentId">
                            <el-select v-model="value"
                                       placeholder="请选择分类" >
                                <el-option label="无上级分类" value="0" ></el-option>
                                <el-option
                                        v-for="item in selectProductCateList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!--<el-form-item label="排序：" prop="sort">-->
                        <!--<el-input v-model="sortValue"></el-input>-->
                        <!--</el-form-item>-->
                        <el-form-item label="类别状态：" prop="showStatus">
                            <el-radio-group v-model="radio">
                                <el-radio  label="1">在卖</el-radio>
                                <el-radio  label="2">废除</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="类别主图：" prop="mainImg">
                            <el-upload
                                    action="777"
                                    :http-request="handlePostMimg"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :auto-upload="false"
                                    ref="upload"
                                    name="imgUrl"
                                    :limit="1"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                        <el-form-item style="text-align: center">
                            <el-button type="primary" @click="submit()" style="margin-left: -315px;">确认上传</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                            <el-button  @click="resetForm">重置</el-button><!--v-if="!isEdit"-->
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "CategoryUpdate",
        data(){
            return{
                radio:'1',
                parentId:'',
                categoryId:this.$route.params.categoryId,
                dialogVisible: false,
                dialogImageUrl: '',
                productCateFrom:{
                    name:'',
                    parentId:'',
                    //sort:'',
                    mainImage:'',
                    showStatus:''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入品牌名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ]
                },
                selectProductCateList:[],
                sortValue:'',
                value:''
            }
        },
        created(){
            this.getParent();
            this.getCategoryInfo();
        },

        methods:{
            getCategoryInfo(){
              this.service.get("/product/manage/category/see.do",{
                  params:{
                      categoryId:this.$route.params.categoryId
                  }
              }).then(res=>{
                  if (res.data.status == 0){
                      this.productCateFrom.name = res.data.data.name;
                      if (res.data.data.status){
                          this.radio = '1';
                      } else{
                          this.radio = '2';
                      }
                  }
              })
            },
            resetForm(){
               this.productCateFrom.name = '';
               this.radio = '1';
            },
            getParent(){
                this.service.get("/product/manage/category/0").then(res=>{
                    console.log(res.data);
                    if (res.data.status == 0){
                        this.selectProductCateList=res.data.data.list;
                    }
                })
            },
            onSubmit(){
                this.$confirm('是否提交数据', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/category/set_category.do",{
                        params:{
                            id:this.categoryId,
                            parentId:this.value,
                            name:this.productCateFrom.name,
                            status:this.radio,
                            sortOrder:this.sortValue,
                            mainImage:this.productCateFrom.mainImage
                        }
                    }).then(res=>{
                        console.log(res.data.status)
                        if (res.data.status==0){
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.push({
                                name:'商品分类'
                            })
                        }else{
                            this.$message.error('添加失败,请重新添加!');
                        }
                    })
                })

            },
            getParentId(){
                console.log(this.value)
            },
            getParentIdF(value){
                console.log(value)
            },
            handlePostMimg(param){
                const formData = new FormData();
                formData.append('file', param.file);
                this.instance.post("/product/manage/fileUpload",formData).then(res=>{
                    //console.log(res.data);
                    this.productCateFrom.mainImage = res.data.data.url;
                    //console.log(this.value.mainImage);
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            submit(res){
                this.$refs.upload.submit();
                this.$refs.upload1.submit();
            },
        }
    }
</script>

<style scoped>
    .form-container{
        width: 600px;
    }
</style>